{extend name="layout/layout" /}


{block name="style"}
	<style>
		.funds{
			background: #fff;
			margin: 5px;
			color: #333;
			padding: 20px 0;
			border-radius: 5px;
		}

		.funds>div{
			font-size: 10px;
			color: #666;
			border-right: 1px solid #eee;
		}

		.funds .amount{
			font-size: 16px;
			font-weight: 600;
			color: #e60012;
		}


		.funds>div:nth-child(4){
			border:none;
		}

		.tips{
			margin-top: 20px;
		}
		.mask{
			background: rgba(0, 0, 0, 0.4);
			position: fixed;
			z-index: 20;
			width: 100%;
			top:0;
			left: 0;
			height: 100%;
		}
		
		.mask .mask-container{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
		}
		
		.mask .mask-title{
			height: 45px;
			line-height: 45px;
			text-align: center;
			border-bottom: 1px solid #ddd;
		}
		
		.mask .mask-close-btn{
			height: 45px;
			line-height: 45px;
			background: #FE0036;
			color:#fff;
			width: 100%;
			text-align: center;
			position: absolute;
			bottom: 0;
		}
		
		.mask .mui-table-view{
			margin: 0;
		}
		
		.mask .mask-list{
			max-height: 400px;
			overflow-y: scroll;
			margin-bottom: 50px;
		}
		
		.mask .mui-table-view-cell{
			padding: 10px 0;
		}
	</style>
{/block}

{block name="main"}
	<div class="index" v-cloak>
		<div class="funds mui-row mui-text-center">
			<div class="mui-col-xs-3">
				<div class="amount">{{user.balance}}</div>	
				<div class="title">余额</div>
			</div>
			<div class="mui-col-xs-3">
				<div class="amount">{{user.integral}}</div>
				<div class="title">积分</div>
			</div>
			<div class="mui-col-xs-3">
				<div class="amount">{{user.phone_balance}}</div>
				<div class="title">话费</div>
			</div>
			<div class="mui-col-xs-3">
				<div class="amount">{{user.voucher_balance}}</div>
				<div class="title">优惠券</div>
			</div>
		</div>


		<div class="funds mui-row mui-text-center">
			<div class="mui-col-xs-4">
				<div class="amount">{{user.withdraw_count}}</div>
				<div class="title">已提现</div>
			</div>
			<div class="mui-col-xs-4">
				<div class="amount">{{user.earnings_count}}</div>
				<div class="title">累计收益</div>
			</div>
			<div class="mui-col-xs-4">
				<div class="amount">{{user.wait_rebate}}</div>
				<div class="title">待返利</div>
			</div>
		</div>

		<div class="detail">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
			        <a class="mui-navigate-right" href="/mobile/funds/detail">资金明细</a>
			    </li>
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right" :href="'/mobile/funds/rebateRecord?type='">返利明细</a>
			    </li>
			</ul>
		</div>

		<a href="" class="mui-btn mui-btn-block mui-btn-theme" @tap.prevent="showMask = true">充值</a>
		
		<div class="mask" v-if="showMask" @tap="showMask = false">
			<div class="mask-container" @tap.stop="showMask = true">
				<div class="goods-status">
					<div class="mask-title">选择充值类型</div>
					<div class="mask-list">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell" @tap.stop="select_type(item)" v-for="item in funds_type">
								<div class="mui-input-row mui-radio mui-right">
									<label>{{item.name}}</label>
									<input name="radio1" type="radio">
								</div>
							</li>
						</ul>
					</div>
				</div>
				
				<div class="mask-close-btn" @tap.stop="showMask = false">关闭</div>
			</div>
		</div>
	</div>
{/block}
{block name="navbar"}{/block}
{block name="script"}
	<script>
		var myVue = new Vue({
			el:'.index',
			data:{
				user:{
					balance:0,
					integral:0,
					phone_balance:0,
					voucher_balance:0
				},
				funds_type: [],
                showMask: false,
			},
			mounted: function(){
				if(token){
					this.token = token;
					console.log(this.token);
					this.getDetail();
				} else {
					this.login();
				}

			},
			methods: {
			    //获取详情
				getDetail: function(){
					layer.open({
						type:2,
						shadeClose:false,
						shade: 'background-color: rgba(0,0,0,.3)',
					});
					var url =  'funds/index';
					var that = this;
					request(that, {'url': url}, function(res){
						layer.closeAll();
						if(res.code == 200) {
							that.user = res.data;
							that.funds_type = res.data.recharge_type;
						} else {
							mui.toast(res.msg);
						}	
					},function(error){
						layer.closeAll();
						mui.toast(error.body.msg);
					});
				},
				//去登录
				login:function(){
					location.href = '/mobile/user/login';
				},
				//选择充值类型
                select_type: function(item){
				    location.href = '/mobile/recharge/recharge/type/'+item.type;
                }
			}
		});
	</script>
{/block}